<script setup>
  import { ref, onMounted } from 'vue'
  import PageHeader from "@/components/PageHeader.vue";
  import AddOrEdit from "@/views/address/components/AddOrEdit.vue";
  import ConfirmModal from "@/components/ConfirmModal.vue";
  import {getAddressListApi, editAddressApi, delAddressApi} from '@/api'
  import { message } from "ant-design-vue";
  const modalRef = ref()
  const addOrEditRef = ref()
  const modalTitle = ref('新增地址')
  const addressList = ref([])
  const delId = ref()
  const delIndex = ref()
  // 显示确认弹窗
  const showConfirmModal = (id, index) => {
    delId.value = id
    delIndex.value = index
    modalRef.value.open()
  }
  // 删除地址
  const delAddress = () => {
    delAddressApi({id: delId.value}).then(() => {
      addressList.value.splice(delIndex.value, 1)
      message.success('删除成功')
    }).catch(err => {
      message.error(err.msg)
    })
    modalRef.value.close()
  }
  // 获取地址列表
  const getAddressList = () => {
    getAddressListApi().then((res) => {
      addressList.value = res.data
    })
  }
  // 修改地址状态
  const editDefault = (item) =>{
    const { name, phone, region, addr, id } = item
    const params = {
      name, phone, region, addr, id,
      is_default: item.is_default === 0 ? 1 : 0
    }
    editAddressApi(params).then(() => {
      getAddressList()
      message.success('修改成功')
    }).catch(err => {
      message.error(err.msg)
    })
  }
  // 显示修改、新增弹窗
  const showModal = (title, params) => {
    modalTitle.value = title
    addOrEditRef.value.open(params)
  }
  onMounted(() => {
    getAddressList()
  })
</script>

<template>
  <div class="address-page">
    <PageHeader>
      <a-button type="primary" style="background: var(--primary)" size="small" @click="showModal('新增地址')"> 新建 </a-button>
    </PageHeader>
    <div class="address-list">
      <div class="address-item" v-for="(item, index) in addressList" :key="item.id">
        <div class="address-info">
          <div class="name-mobile"> {{ item.name }} {{ item.phone }} </div>
          <div class="address"> {{ item?.modify_region?.name }} {{ item.addr }} </div>
        </div>
        <div class="address-footer">
          <a-checkbox :checked="item.is_default === 1" @change="editDefault(item)">
            {{ item.is_default === 1 ? '' : '设为' }}默认地址
          </a-checkbox>
          <div class="actions">
            <div class="btn" @click="showConfirmModal(item.id, index)"> 删除 </div>
            <div class="btn" @click="showModal('修改地址', item)"> 编辑 </div>
          </div>
        </div>
      </div>
    </div>
    <AddOrEdit ref="addOrEditRef" :title="modalTitle" @confirm="getAddressList"/>
    <ConfirmModal ref="modalRef" title="删除" tips="确定要删除改地址吗？" @confirm="delAddress"/>
  </div>
</template>

<style scoped lang="scss">
  .address-page {
    padding: 30px 0;
    .address-list {
      gap: 20px;
      display: flex;
      flex-direction: column;
      padding: 10px 12px;
      .address-item {
        gap: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
        box-shadow: rgba(99, 99, 99, 0.2) 0 2px 8px 0;
        .address-info {
          gap: 10px;
          display: flex;
          flex-direction: column;
          .address {
            color: #999;
          }
        }
        .address-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border-top: 1px solid #eee;
          padding-top: 10px;
          :deep(.ant-checkbox-checked .ant-checkbox-inner) {
            background-color: var(--primary);
            border-color: var(--primary) !important;
          }
          :deep(.ant-checkbox-wrapper:hover .ant-checkbox-inner) {
            border-color: var(--primary);
          }
          :deep(.ant-checkbox-checked:after) {
            border-color: var(--primary);
          }
          .actions {
            display: flex;
            gap: 20px;
            .btn {
              font-size: 12px;
              padding: 4px 20px;
              border: 1px solid #eee;
              border-radius: 20px;
              cursor: pointer;
              transition: 0.6s all;
              &:hover {
                color: var(--primary);
                border-color: var(--primary);
              }
            }
          }
        }
      }
    }
  }
</style>